import React, {Component} from 'react';
import {Image, StyleSheet, Text, View, ImageBackground} from 'react-native';
import {Flex, WingBlank} from '@ant-design/react-native';
import {Card} from 'react-native-shadow-cards';
class CwCard extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <Card style={{width: '92%', marginLeft: '4%', marginRight: '4%', paddingTop: 10, paddingBottom: 10, marginTop: 10}}>
                <Flex style={{width: '100%'}} justify="between">
                    <Text numberOfLines={1} style={{paddingLeft: 12, fontSize: 16}}>
                        {this.props.item.BuildingName}
                    </Text>
                    <Text numberOfLines={1} style={{color: 'red', paddingRight: 12, fontSize: 16}}>
                        ￥{this.props.item.ParkingPirce}
                    </Text>
                </Flex>
                <View style={{width: '100%', height: 1, backgroundColor: '#EEEEEE', marginTop: 14, marginBottom: 15}} />
                <Flex style={styles.flex}>
                    <Flex style={{width: '20%'}}>
                        <ImageBackground
                            style={{width: '100%', height: undefined, aspectRatio: 1}}
                            source={require('~/assets/community/background.png')}>
                            <Flex style={{height: '100%', width: '100%'}} justify={'center'} align={'center'}>
                                <Text style={{color: 'white', fontSize: 16, width: '100%', textAlign: 'center'}}> {this.props.item.ParkingName}</Text>
                            </Flex>
                        </ImageBackground>
                    </Flex>
                    <Flex style={styles.itemtextview}>
                        <Flex style={styles.item}>
                            <Text numberOfLines={1} style={styles.lowername}>
                                {this.props.item.ParkingName}
                            </Text>
                        </Flex>
                        <Flex style={{width: '100%', paddingLeft: 10, paddingRight: 10, height: 15}} direction="row">
                            <Text style={styles.text}>
                                建筑面积:
                                <Text style={styles.text}>{this.props.item.AreaBuilt}㎡ </Text>
                            </Text>
                            <Text style={{fontSize: 12, color: '#666666', marginRight: 3}}>|</Text>
                            <Text style={styles.text}>
                                使用面积: <Text style={styles.text}>{this.props.item.AreaInner}㎡</Text>
                            </Text>
                        </Flex>
                        {/* <Flex style={{ width: '100%', paddingLeft: 10, paddingRight: 10, height: 15 }}>
                            <Text style={styles.text}>
                                姓名:
                                <Text style={styles.text}>{this.props.item.RegFullName} </Text>
                            </Text>
                            <Text style={styles.text}>
                                电话: <Text style={styles.ttext}>{this.props.item.Mobile}</Text>
                            </Text>
                        </Flex> */}
                        {/* <Flex style={styles.item} direction={'row'} justify={'between'}>
                            <Text style={styles.money}>
                                车位售价:
                                <Text
                                    style={{
                                        fontSize: 18,
                                    }}>
                                    {this.props.item.PriceMarket}
                                </Text>
                                元
                            </Text>
                        </Flex> */}
                    </Flex>
                </Flex>
                <View style={{width: '100%', height: 1, backgroundColor: '#EEEEEE', marginTop: 14, marginBottom: 15}} />
                {/* <Flex direction='row' justify='around'>
                    <Text >车位币:<Text style={{color: '#E67817'}}>{this.props.item.PriceMarket},</Text></Text>
                    <Text>已选择:<Text style={{color: '#E67817'}}>A套餐,</Text></Text>
                    <Text>支付方式:<Text style={{color: '#E67817'}}>全款支付</Text></Text>
                </Flex> */}
            </Card>
        );
    }
}

export default CwCard;

const styles = StyleSheet.create({
    flex: {
        backgroundColor: 'white',
        width: '100%',
        borderRadius: 5,
        paddingLeft: 10,
        paddingRight: 10,
    },
    image: {
        width: '100%',
        resizeMode: 'contain',
    },
    itemtextview: {
        flexDirection: 'column',
        width: '80%',
        paddingLeft: 5,
    },
    item: {
        width: '100%',
        paddingLeft: 10,
        paddingRight: 10,
        height: 25,
    },
    lowername: {
        fontSize: 16,
        color: '#444444',
        fontWeight: 'bold',
    },
    text: {
        fontSize: 12,
        color: '#666666',
    },
    ttext: {
        color: 'black',
    },
    // biaoqian: {
    //     borderWidth: 1,
    //     color: '#EC4F46',
    //     borderColor: '#EC4F46',
    //     borderRadius: 12,
    //     width: 62,
    //     height: 24,
    //     textAlign: 'center',
    //     paddingTop: 2,
    // },
    money: {
        fontSize: 11,
        color: '#CE2D32',
    },
});
